import React, { Suspense } from 'react'
import ReactDOM from 'react-dom/client'
import 'normalize.css'
import { Provider } from 'react-redux'
import { ThemeProvider } from 'styled-components'
import { HashRouter } from 'react-router-dom'
import zhCN from 'antd/locale/zh_CN'
import { ConfigProvider } from 'antd'

import '@/assets/css/index.less'
import App from '@/App'
import store from '@/store'
import theme from '@/assets/theme'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  // redux的使用
  <Provider store={store}>
    {/*css in js主题的使用*/}
    <ThemeProvider theme={theme}>
      {/*antd国际化*/}
      <ConfigProvider locale={zhCN}>
        {/*路由模式*/}
        <HashRouter>
          {/*路由占位*/}
          <Suspense fallback={<h3>loading...</h3>}>
            <App />
          </Suspense>
        </HashRouter>
      </ConfigProvider>
    </ThemeProvider>
  </Provider>
)
